<template>
  <div class="confirm" v-show="showFlag" @click.stop>
    <div class="confirm-wrapper">
      <transition name="confirm">
        <div class="content" v-show="showFlag">
          <p class="text">{{text}}</p>
          <div class="operate">
            <div @click="cancel" class="operate-btn">{{cancelText}}</div>
            <div @click="confirm" class="operate-btn right">{{confirmText}}</div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirm',
  props: {
    text: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data () {
    return {
      showFlag: false
    }
  },
  methods: {
    show () {
      this.showFlag = true
    },
    hide () {
      this.showFlag = false
    },
    cancel () {
      this.hide()
      this.$emit('cancel')
    },
    confirm () {
      this.hide()
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped lang="less">
@import '~assets/style/variable';
.confirm {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0,.3);
  &-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    .content {
      width: 250px;
      border-radius: 6px;
      background: #fff;
      .text {
        padding: 20px 15px;
        line-height: 22px;
        text-align: center;
        font-size: 15px;
        color: var(--text-color);
      }
      .operate {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: @fs-medium;
        .operate-btn {
          flex: 1;
          line-height: 22px;
          padding: 10px 0;
          border-top: 1px solid @border-color;
          color: var(--text-color);
          &.right {
            border-left: 1px solid @border-color;
            color: var(--theme-color)
          }
        }
      }
    }
  }
}
</style>
